<template>
<CardStack class="drawer-part-list column noselect" card-class="part-item" :dropwidth="245" @card-drag-out="onCardDragOut">
    <div class="row between item-center" style="height: 32px;">
        将卡片拖放到画布上
    </div>

    <div class="part-list grow column cross-start item-start">
        <div class="part-item noselect" v-for="partInfo in PartLib" :part-class="partInfo.class">
            <div class="row cross-end item-end titlerow">
                <img src="/icons/brick2.png" />
                <span class="title">{{partInfo.title}}</span>
            </div>
            <div class="desc" style="">{{partInfo.description}}</div>
        </div>
    </div>
</CardStack>
</template>

<style>
.part-item {
    width: 100%;
    padding: 15px 10px 15px 10px ;
    border-bottom: 1px solid #e8eaec;
    background-color: #fff;
}
.part-item:last-child {
    border-bottom: 0px;
}
/* .part-item .titlerow {
} */
.part-item img {
    width:32px;
    height:32px;
    margin-right: 10px;
}
.part-item .title {
    color: rgba(0,0,0,.85);
    font-size: 20px;
    line-height: 28px;
}

.part-item .desc {
    margin-top: 10px;
}
</style>


<script lang="ts" setup>
import { ref, reactive, onMounted, Ref } from 'vue'
import {AppModel} from "../../../model/AppModel"
import CardStack from "../../common/CardStack.vue"


const PartLib = [
    {
        title: "LED" ,
        description: "单色LED灯珠零件。" ,
        class: "BeLED"
    } ,
    
    {
        title: "LED RGB" ,
        description: "全彩LED灯珠零件。" ,
        class: "BeLEDRGB"
    } ,
    
    {
        title: "调速电机" ,
        description: "通过PWM信号控制转速的电机。" ,
        class: "BeMotor"
    } ,
    
    {
        title: "舵机 270" ,
        description: "通过PWM信号控制转动角度的舵机。" ,
        class: "BeServo"
    } ,
    
    {
        title: "BePower200" ,
        description: "小号电源。" ,
        class: "BePower200"
    } ,
    
    // {
    //     title: "BePowerX2" ,
    //     description: "大号电源，可放入两节18650。" ,
    //     class: "BePowerX2"
    // } ,

    {
        title: "BeSwitch" ,
        description: "轻触按键、滑动开关、摇臂开关" ,
        class: "BeSwitch"
    } ,

    {
        title: "BeJoystick" ,
        description: "摇杆" ,
        class: "BeJoystick"
    } ,

    {
        title: "BePoser" ,
        description: "3D姿态传感器" ,
        class: "BePoser"
    } ,

    {
        title: "BeColorDetector" ,
        description: "颜色识别传感器。" ,
        class: "BeColorDetector"
    } ,

    {
        title: "BeScreen 096i" ,
        description: "0.96寸彩色屏幕" ,
        class: "BeScreen096i"
    } ,

    // {
    //     title: "BeScreen 144i" ,
    //     description: "1.44寸彩色屏幕" ,
    //     class: "BeScreen096i"
    // } ,
]



const popupDrawer = ref(false)

defineExpose({popupDrawer})

const emit = defineEmits(["new-part"])

function onCardDragOut($card: any, x: number, y: number){
    let clsName = $card.attr('part-class')
    emit("new-part", clsName , x, y )
}


</script>